<template>
	<div class="index rowBC">
		<div class="flex-1 columnCC" v-for="(item, index) in progressList" :key="index">
			<div class="top columnCC">
				{{ item.name }}
				<div v-if="item.boxNumber">({{ item.boxNumber }})</div>
			</div>
			<div class="progress" v-if="progressList.length">
				<el-progress class="progress-one" :stroke-width="10" :width="140" :hidden="60" :color="colors" type="circle"
					:percentage="item.feedNum ? item.feedNum < 300 ? (item.feedNum / 300) * 100 * 0.75 : 75 : 0">
					<template #default="{}">
						<div class="percentage">
							<div class="percentage-title">{{ types[item.areaType] && types[item.areaType].name1 }}</div>
							<div class="percentage-value circlar">
								<svg viewBox="0 0 100 100">
									<path d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle1"></path>
									<text>
										<textPath style="fill: #ffffff" xlink:href="#circle1">{{ item.feedNum }}{{
											types[item.areaType] && types[item.areaType].unit1 }}</textPath>
									</text>
								</svg>
							</div>
						</div>
					</template>
				</el-progress>
				<el-progress class="progress-item progress-two" :stroke-width="10" :width="110" :color="colors" :hidden="60"
					type="circle"
					:percentage="item.currentWeight && item.totalWeight ? item.currentWeight / item.totalWeight * 100 * 0.75 : 0">
					<template #default="{}">
						<div class="percentage">
							<div class="percentage-title">{{ types[item.areaType] && types[item.areaType].name2 }}</div>
							<div class="percentage-value circlar">
								<svg viewBox="0 0 100 100">
									<path d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle2"></path>
									<text>
										<textPath style="fill: #ffffff" xlink:href="#circle2">{{ item.currentWeight }}{{
											types[item.areaType]?.unit2 }}</textPath>
									</text>
								</svg>
							</div>
						</div>
					</template>
				</el-progress>
				<el-progress class="progress-item progress-three" :stroke-width="10" :width="80" :color="colors"
					:hidden="60" type="circle" :percentage="item.percentage ? item.percentage * 0.75 : 0">
					<template #default="{}">
						<div class="percentage">
							<div class="percentage-title">{{ types[item.areaType] && types[item.areaType].name3 }}</div>
							<div class="percentage-value">
								{{ item.percentage && item.percentage.toFixed(1) }}
								<span class="unit">{{ types[item.areaType] && types[item.areaType].unit3 }}</span>
							</div>
						</div>
					</template>
				</el-progress>
			</div>
			<div class="text-center" :style="{ color: status[item.cardStatus] && status[item.cardStatus].color }">{{
				status[item.cardStatus] &&
				status[item.cardStatus].name }}</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref,watch, computed } from 'vue';
import { compressionBox } from '@/api/RoadGate';
import { useStore } from 'vuex';

// const props: any = defineProps({
// 	echartData: Object,
// 	isTag: Boolean
// })
const store = useStore();
const colors = [
	{ color: '#01b90a', percentage: 15 },
	{ color: '#00bdd6', percentage: 30 },
	{ color: '#e4ba00', percentage: 45 },
	{ color: '#ec6600', percentage: 60 },
	{ color: '#ff0000', percentage: 75 }
];
const status = {
	0: {
		color: '#ffffff',
		name: '无厢'
	},
	1: {
		color: '#55aa00',
		name: '正常'
	},
	2: {
		color: '#ff0000',
		name: '待转运'
	},
};
const types = {
	0: {
		label: '卡位',
		unit1: '次',
		unit2: 't',
		unit3: '%',
		name1: '上料次数',
		name2: '垃圾重量',
		name3: '厢体容积',
	},
	1: {
		label: '大件区',
		unit1: '次',
		unit2: '件',
		unit3: '%',
		name1: '投放次数',
		name2: '垃圾件数',
		name3: '垃圾占空比',
	}
};
const progressList = ref<any>([]);

const init = async () => {
	const res = await compressionBox({ site: window.site });
	progressList.value = res.data.result && res.data.result.map((c: any) => ({
		...c,
		percentage: c.currentCapacity,
		state: c.cardStatus
	}))
	console.log('压缩箱实时状态', progressList.value);
};

const refresh = computed(() => store.state.refresh); // 当前故障状态

watch(
	refresh,
	() => {
		init();
	},
	{
		immediate: true
	}
);
</script>

<style lang="scss" scoped>
.index {
	width: 100%;

	.top {
		text-align: center;
		padding: 0.3em 0;
		background: #6095e5;
		margin: 0.7em 1.5em;
		font-size: 0.8em;
		border-radius: 0.5em;
		width: 6em;
		height: 2.8em;
	}

	.progress {
		text-align: center;
		font-size: 0.625em;
		position: relative;
		margin-bottom: 0.7em;

		:deep(.el-progress__text) {
			color: #ffffff;
			font-size: 1em !important;
			width: 100%;
			height: 100%;
		}

		// :deep(.el-progress-circle__track) {
		// 	stroke-dasharray: 0, 232.743px !important;
		// }

		.circlar path {
			fill: none;
		}

		.circlar svg {
			display: block;
			overflow: visible;
		}

		&-one {
			:deep(.el-progress-circle__track) {
				stroke-dasharray: 215.743px, 232.743px !important;
			}

			.percentage-value {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(100deg);
				width: 87%;
				height: 87%;
				font-size: 0.625em;
			}
		}

		&-two {
			:deep(.el-progress-circle__track) {
				stroke-dasharray: 211.7px, 232.743px !important;
			}

			.percentage-value {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(100deg);
				width: 84%;
				height: 84%;
				font-size: 0.8em;
			}
		}

		&-three {
			:deep(.el-progress-circle__track) {
				stroke-dasharray: 202.071px, 232.743px !important;
				// background: #6095e5 !important;
			}

			.percentage-value {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		&-item {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.percentage {
			width: 100%;
			height: 100%;
			position: relative;

			&-title {
				position: absolute;
				width: 100%;
				top: 0;
				font-size: 0.8em;
				right: 50%;
				padding-right: 10px;
				color: #b8e6f4;
				text-align: right;
			}

			.unit {
				font-size: 0.5em;
			}
		}

		.el-progress :deep(path:first-child) {
			// stroke: rgba(7, 137, 224, 0.288);
			stroke-linecap: round;
		}

		:deep(.el-progress-circle__track) {
			stroke: #687ee069 !important;
		}
	}
}
</style>
